<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位遮罩层</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            /* 固定定位以html视口（view port）为参照物，紧贴四个边，实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias animi assumenda culpa cumque
            dolorum earum eligendi facilis harum iste itaque, laboriosam laborum maiores nesciunt repellendus tempora
            velit veritatis vitae?
        </div>
        <div>Accusamus aliquid assumenda at, beatae culpa cupiditate deleniti est harum illo iusto mollitia odio
            veritatis. Consequuntur doloremque ducimus, est maxime modi mollitia natus nihil odio quia, quos tempore vel
            voluptatem.
        </div>
        <div>A accusantium aliquid autem consectetur cupiditate dicta doloremque eligendi est, excepturi exercitationem
            ipsam itaque iusto laudantium maxime nam obcaecati odio quae quaerat reprehenderit repudiandae rerum sequi
            sunt ut velit voluptatem?
        </div>
        <div>Asperiores aut in nihil voluptas. A blanditiis cupiditate eos ut! Animi deserunt eius et id, ipsam itaque,
            laborum non possimus quae quia repellat tenetur unde voluptatum? Est, in reiciendis. Laudantium.
        </div>
        <div>Blanditiis et ipsam nulla odit tempore! Ad adipisci aut beatae consequuntur eum ex fugit ipsam minus
            molestias, mollitia necessitatibus nihil, numquam odit perferendis porro praesentium rem sunt velit
            voluptate voluptates?
        </div>
        <div>Atque consectetur delectus id ipsum magnam maiores, minus nulla omnis vitae voluptas? Accusamus distinctio
            impedit quod? Aspernatur, commodi debitis dolores eos excepturi facilis illum iure optio perferendis quia
            quo tempora?
        </div>
        <div>Corporis deserunt dicta dolorem facere impedit incidunt inventore iusto labore magnam minima natus numquam,
            odio omnis perspiciatis, qui reiciendis reprehenderit saepe vel veritatis voluptatem. Odit optio
            perspiciatis quaerat vero voluptate.
        </div>
        <div>Aliquid autem dolorum fugiat id illo nam nihil nostrum, officiis pariatur quidem quos tempore ullam vel?
            Consequatur incidunt praesentium recusandae. Accusamus cum dolore hic inventore labore, quod recusandae!
            Iusto, voluptas?
        </div>
        <div>Esse excepturi nulla repudiandae sit. Atque autem commodi consectetur consequatur debitis dicta dolor
            eligendi, error et molestiae molestias quas sit tempore veniam vitae. Dolor, ex numquam quasi repellat sed
            tempore?
        </div>
        <div>Accusamus accusantium alias beatae consequatur consequuntur eveniet fuga harum id impedit in iure, laborum
            libero magni molestias nam natus nostrum officia possimus quae quasi recusandae repellat saepe soluta
            tempore vitae.
        </div>
        <div>Accusamus adipisci architecto eius iure molestiae odio recusandae sint tenetur. Accusantium animi, atque
            consectetur delectus dicta, earum error, excepturi facere incidunt ipsum minus mollitia nobis qui quod
            repellendus tempore temporibus!
        </div>
        <div>Corporis cum optio placeat quis. Commodi, consequuntur dignissimos enim excepturi illo labore laboriosam
            laborum maxime, officiis qui quia repellat reprehenderit sapiente similique totam! Corporis, dolor
            exercitationem in laborum sunt unde?
        </div>
        <div>Ab atque beatae dolores earum iure nemo nihil nulla qui quo tempore? Alias dicta dolorum expedita ipsum
            minima neque pariatur, quae repellat sequi? Ab at ipsa minima necessitatibus, perferendis ut?
        </div>
        <div>Ab ad blanditiis doloribus ducimus eaque eligendi eum facilis fugiat illo illum inventore iste laudantium
            nobis optio pariatur porro quasi rerum saepe, sequi sint sit tempora temporibus tenetur ut voluptas.
        </div>
        <div>Architecto commodi cumque, dicta ducimus error eum exercitationem facere illum iste quaerat quo quos
            recusandae ullam veritatis voluptatem! Alias asperiores ducimus eos explicabo incidunt neque nesciunt nulla
            recusandae tempore tenetur.
        </div>
        <div>Adipisci distinctio dolore eveniet expedita minima officiis placeat quidem. Aut consequatur expedita magni
            necessitatibus perferendis quibusdam quo quos soluta vel? Alias dolore doloremque excepturi laboriosam
            laudantium natus optio possimus ratione.
        </div>
        <div>Commodi cumque error eum ipsum libero omnis quidem? A at, commodi consectetur dolorem facere facilis
            laborum laudantium neque pariatur porro, praesentium quas quos soluta veniam voluptates. Dolore facilis quas
            vel?
        </div>
        <div>Accusamus dignissimos distinctio eius facilis labore nihil officia quae, reprehenderit similique voluptas!
            Aliquam architecto asperiores, autem, consequatur debitis delectus eligendi facilis fugiat laudantium magni
            officiis perferendis, repellat reprehenderit saepe voluptatum.
        </div>
        <div>Blanditiis dignissimos dolores est, excepturi explicabo fugit harum incidunt iusto laboriosam magni
            obcaecati odio officia officiis omnis quaerat qui quisquam quod, reiciendis ullam velit? Architecto ea
            maiores maxime obcaecati ullam.
        </div>
        <div>Ab commodi delectus distinctio doloribus, enim excepturi, id incidunt molestiae mollitia obcaecati possimus
            reiciendis voluptate! A accusamus dicta doloremque eos incidunt ipsum natus nostrum reprehenderit velit?
            Molestias obcaecati quasi tenetur!
        </div>
        <div>Accusantium, assumenda dignissimos fugiat incidunt ipsa iste iure laboriosam minus nesciunt numquam optio,
            perspiciatis praesentium quasi, ratione reprehenderit rerum similique sunt vitae. Eos ex exercitationem
            nostrum quasi repudiandae sed voluptatibus!
        </div>
        <div>Accusamus accusantium aliquam amet, consequatur, culpa debitis deserunt dolor ducimus ex explicabo hic ipsa
            ipsam itaque laudantium magnam maxime nobis quae quas quisquam ratione reiciendis, repellat soluta tempora!
            Delectus, ullam.
        </div>
        <div>Consequuntur illo iste molestias, quidem quod rerum sint tempora? Corporis ducimus eos eum ex laboriosam
            quibusdam vel. Cumque eos, est eum in labore maiores nemo obcaecati, officiis reiciendis tenetur, vel.
        </div>
        <div>Ab, ad beatae debitis enim esse illo incidunt qui quia quis rem. Ad dicta, error explicabo id illo impedit
            ipsum optio placeat quae quod quos reprehenderit sapiente suscipit vel, vero!
        </div>
        <div>Ab accusantium alias amet architecto asperiores autem commodi deserunt eligendi excepturi illo impedit iure
            modi necessitatibus nisi odit, quis recusandae repellat repudiandae similique sint sit, tempora temporibus
            veniam veritatis voluptas?
        </div>
        <div>Error esse eum, id libero nam obcaecati quam quidem voluptatem. Atque aut commodi cum enim ex hic illo iure
            magnam magni maxime nobis odit omnis, quo repellat sequi sit suscipit!
        </div>
        <div>Animi deserunt dolore est et laboriosam nulla odit quod, vitae? Ad aut doloremque doloribus eligendi
            exercitationem fuga harum illo incidunt molestias nostrum omnis praesentium quam quas quibusdam quidem,
            soluta voluptatem!
        </div>
        <div>Accusamus aliquid aut autem blanditiis, consectetur ea eligendi est eum expedita fugiat harum illo impedit
            in ipsa itaque libero, minus modi necessitatibus, nisi perferendis quam quas quos recusandae unde
            voluptatem.
        </div>
        <div>Adipisci aliquid aperiam aspernatur aut autem cupiditate dicta, doloremque exercitationem explicabo facilis
            fugit harum laboriosam laborum magnam maiores modi natus nesciunt odit rerum sapiente sed sit totam ullam
            veritatis voluptatem.
        </div>
        <div>Architecto, asperiores at magnam necessitatibus nobis non totam ullam voluptates. Esse et, facilis illo
            impedit ipsam iste magnam omnis quae quaerat quia quidem repellendus repudiandae suscipit temporibus ullam
            veritatis voluptatem.
        </div>
        <div>A aliquam aliquid asperiores corporis debitis dicta dolor dolorem doloribus ducimus eius et illum impedit
            ipsa iste iusto labore nesciunt, praesentium, quaerat quis rerum sequi similique ullam unde vel veritatis.
        </div>
        <div>Illo ipsum pariatur sed? Aliquid assumenda deleniti eaque eveniet hic molestiae possimus recusandae
            temporibus. Assumenda delectus eaque, eligendi excepturi labore minus nisi perspiciatis quaerat quos
            repellat similique soluta suscipit tenetur?
        </div>
        <div>A amet atque commodi consequatur, cumque deleniti, earum eveniet excepturi explicabo fugiat fugit hic id
            illo ipsam laborum minus, nihil porro quasi qui quibusdam quisquam saepe similique sunt tenetur unde.
        </div>
        <div>Aperiam atque doloremque eius libero? Aliquid commodi consequuntur culpa cupiditate eveniet quia!
            Dignissimos ea ipsam quod sunt. Accusamus asperiores consequatur, cupiditate ea eos magni maiores nisi,
            obcaecati pariatur tempora tempore?
        </div>
        <div>Aliquid dolor eos est eum laborum maiores molestias mollitia sint voluptatibus! Distinctio omnis
            perspiciatis quasi reiciendis vero. Ab accusantium aut blanditiis deserunt dignissimos facere laudantium
            libero, quaerat, soluta velit voluptatibus.
        </div>
        <div>Ab aliquam consectetur dolore dolores dolorum ducimus ex iste repellat rerum suscipit? Amet animi
            architecto at atque cumque distinctio doloremque fugiat iusto libero molestiae mollitia numquam similique
            vero voluptate, voluptatem?
        </div>
        <div>Ducimus incidunt magni maxime molestias non numquam officia officiis saepe temporibus veniam. Cum
            cupiditate dignissimos esse iste natus non obcaecati pariatur perferendis quidem, quos repudiandae sunt
            tempore vel vitae voluptatibus!
        </div>
        <div>Accusamus aspernatur aut consequuntur doloremque enim eum, ex expedita harum incidunt inventore ipsa
            laborum nobis non omnis, optio praesentium qui quisquam quod soluta velit. Fuga fugit impedit ratione
            repudiandae voluptates?
        </div>
        <div>Alias dolorem facilis illum labore nisi perspiciatis placeat quas quasi sapiente vel! Accusantium error
            incidunt quis repellendus reprehenderit sed totam! Autem est fugiat illo labore natus nihil odio quam, qui!
        </div>
        <div>Cum cumque cupiditate dolores est ex expedita facilis hic inventore ipsa laudantium maiores modi molestiae
            neque nisi omnis pariatur porro possimus, praesentium quasi quis ratione repudiandae saepe sequi ullam
            voluptates?
        </div>
        <div>Ab commodi dignissimos eius, eos esse eum in incidunt iure numquam perspiciatis praesentium vero? Adipisci
            dolorum, est fugiat officia perspiciatis, quasi recusandae reiciendis, repudiandae sit sunt velit vero
            voluptatibus. Necessitatibus?
        </div>
        <div>Deserunt itaque nostrum suscipit voluptatem? Aliquid aut distinctio esse, eveniet, ex ipsa iste nemo
            obcaecati omnis porro possimus quidem quis quod rerum sapiente sunt voluptatem. Accusamus iusto modi numquam
            praesentium.
        </div>
        <div>Accusantium alias dolorem eveniet fugiat impedit nisi perspiciatis quasi unde vitae. Accusamus atque autem
            consequuntur corporis, dignissimos eum facere fugiat in magnam nam pariatur praesentium quisquam tempora
            totam ullam, vero!
        </div>
        <div>Alias aspernatur blanditiis, delectus deserunt enim et itaque maxime minima necessitatibus nesciunt quo,
            quod repellendus ullam, velit voluptatibus! Blanditiis ex impedit incidunt quasi rem. Adipisci ex expedita
            tenetur ullam voluptate?
        </div>
        <div>Error inventore itaque natus necessitatibus nemo nostrum nulla odio quia quis rem? Earum fugiat maxime quam
            sapiente ut, vitae? Asperiores est facere id in minus odit, repudiandae ut voluptate voluptatem?
        </div>
        <div>Aliquid asperiores atque, consequatur delectus distinctio eligendi enim et ex exercitationem expedita harum
            iste minus modi natus neque nesciunt numquam obcaecati officia, officiis omnis perspiciatis placeat
            praesentium, quos sit voluptates!
        </div>
        <div>Alias aperiam architecto atque dicta dignissimos doloremque, et eveniet facilis fuga illum in, ipsa
            laudantium minus nesciunt non odit omnis quia ratione rem reprehenderit similique temporibus ut veritatis
            voluptas voluptates.
        </div>
        <div>Ab alias architecto asperiores consequuntur distinctio dolor dolore doloremque eius ex fuga in ipsa itaque
            mollitia nihil, nobis non odio odit omnis, praesentium quae, quibusdam quidem sint soluta sunt vitae?
        </div>
        <div>A aspernatur cum deleniti dolores ducimus, earum laboriosam magni nulla obcaecati odio quaerat, rem
            sapiente similique sint tempora vel voluptatem voluptates voluptatibus? Assumenda dolorem libero, nisi
            provident repellat sunt voluptates.
        </div>
        <div>Nisi, quaerat, tenetur. Dolorum est in inventore perferendis ut! Rem, repellendus vel! Amet beatae commodi
            culpa cumque esse excepturi fuga illum iure, mollitia quisquam, soluta vel vitae voluptates? Illo, sequi.
        </div>
        <div>Aperiam aspernatur atque blanditiis culpa delectus dolor dolorum, error ex facere in, maxime mollitia nulla
            odit officia perspiciatis quasi qui quidem repellat repudiandae sed totam unde vel veritatis voluptate,
            voluptatem.
        </div>
        <div>Asperiores commodi, consequuntur corporis debitis deleniti dolor dolorem earum ex fuga id illum inventore
            laudantium molestiae natus nemo neque nobis pariatur, placeat recusandae suscipit temporibus totam veritatis
            voluptas voluptates voluptatum!
        </div>
        <div>Eos esse molestiae omnis pariatur provident quae repellat sed tenetur. Aperiam assumenda corporis cum
            cupiditate dolor enim esse eum laboriosam, minima nemo, odit placeat quia quis quod repellendus ullam velit.
        </div>
        <div>Adipisci architecto, atque autem consequuntur culpa cum debitis delectus deleniti dicta eius enim et
            impedit iure minus molestias mollitia neque, nulla numquam, provident repellendus sit soluta temporibus
            totam voluptas voluptates?
        </div>
        <div>Ab at autem cum dolore eius esse est fugiat incidunt neque porro quam quidem sapiente, voluptate! Commodi
            dolorem eius error provident qui quia quo rem, vero. Autem blanditiis dolor harum.
        </div>
        <div>Aperiam distinctio eius exercitationem in sequi tempore! Laudantium optio quidem quod sapiente. Accusamus
            at eveniet fugiat, itaque natus perspiciatis placeat provident quas tenetur ut. Dolor nam quibusdam sed
            velit voluptatem.
        </div>
        <div>Alias beatae earum illo natus? Adipisci aspernatur at autem beatae deserunt dignissimos earum eius enim
            ipsa minima, mollitia quasi qui quisquam quod repellendus soluta tempore temporibus! Error eum molestias
            nostrum!
        </div>
        <div>Atque consequuntur dignissimos explicabo fuga impedit nesciunt quaerat, sapiente temporibus totam? At
            deserunt doloribus eos ipsa quam tenetur, totam. Aut dicta dolorum eius labore libero modi nihil nostrum
            sint, unde.
        </div>
        <div>Aliquam asperiores consectetur dolorem tempora vitae. A, alias beatae cum doloribus ipsum iure perspiciatis
            quasi ratione sapiente ullam ut voluptate voluptates. Ab accusamus enim exercitationem minima nam nulla
            recusandae voluptas.
        </div>
        <div>Ad culpa dignissimos dolore dolorum facere fugiat, ipsam laborum laudantium necessitatibus perferendis
            porro, praesentium quas repellat repellendus veritatis vitae voluptatum. Enim labore obcaecati quod
            repellendus vero. At modi molestias quam.
        </div>
    </div>

</body>
</html>